<template>
	<view>
		<view class="list">
			<view class="item solid-bottom">
				<text>微信昵称：</text>
				<input type="text" v-model="fromData.wx_name" placeholder="请输入微信昵称">
			</view>
			<view class="item solid-bottom">
				<text>手机号：</text>
				<input type="number" v-model="fromData.phone" placeholder="请输入手机号">
			</view>
			<view class="item solid-bottom">
				<text>支付宝账号：</text>
				<input type="text" v-model="fromData.alipay_account" placeholder="请输入支付宝账号">
			</view>
			<view class="item solid-bottom">
				<text>支付宝姓名：</text>
				<input type="text" v-model="fromData.alipay_name" placeholder="请输入支付宝姓名">
			</view>
			<view class="margin-top text-sm text-red text-center">（请认真填写并核对您的支付宝账号和姓名，将用于平台给您转账，如填写错误造成的损失由用户个人承担）</view>
		</view>

		<view class="protocol text-center">
			<view @click="()=> this.isAgree = !this.isAgree" class="flex align-center justify-center margin-bottom-xs">
				<text :class="[isAgree? 'text-green':'text-grey']" class="icon-squarecheckfill" style="font-size: 40rpx;"></text>
				<text class="text-lg text-gray margin-left-xs">提交认证即代表同意</text>
			</view>
			<view @click="()=> this.onGoNext('/pages/Column/Protocol/Protocol')" class="text-lg" style="color: #151515;">《卡券交易服务协议》</view>
		</view>

		<bottom-bar buttonText="确定" @submit="onSubmit"></bottom-bar>

		<accredit ref="showPicker" @userInfo="GetUserSuccess"></accredit>
		
		<buy-hint ref="isBuyHintPopup" top="50" title="保存成功">
			<view class="text-gray text-center">
				<text>您的支付宝账号和姓名\n将用于平台给您转账</text>
			</view>
			<button @click="onCallBack" style="width: 200rpx;" class="cu-btn bg-green round shadow-blur margin-top-lg">确 定</button>
		</buy-hint>
	</view>
</template>

<script>
	import BuyHint from "@/components/BuyHint.vue"
	import BottomBar from "@/components/BottomBar.vue"
	import {
		alert,
		toast
	} from "@/utils/util.js"
	import userApi from "@/Api/User.js"

	export default {
		components: {
			BottomBar,
			BuyHint
		},
		computed: {
			userAccredit() {
				return this.$store.state.userAccredit;
			},
			userInfo() {
				return this.$store.state.userInfo;
			}
		},
		onLoad() {
			this.watchUserAccredit()
		},
		data() {
			return {
				isAgree: true,
				fromData: {
					wx_name: '',
					phone: '',
					alipay_account: '',
					alipay_name: ''
				}
			}
		},
		methods: {
			getUserData() {
				userApi.getUserData()
					.then(res => {
						this.fromData['wx_name'] = res.nickname
						this.fromData['phone'] = res.mobile
						this.fromData['alipay_account'] = res.alipay_account
						this.fromData['alipay_name'] = res.alipay_name
					})
			},
			onSubmit() {
				if (this.userAccredit) {
					this.$refs.showPicker.show()
					return
				}
				if(!this.verifyData(this.fromData)) {
					return
				}
				if (!this.isAgree) {
					return
				}
				userApi.authenticationApi(this.fromData)
					// .then(res=> alert('保存成功！').then(() => setTimeout(() => uni.navigateBack(), 500)))
					.then(res => {
						this.$refs.isBuyHintPopup.show()
					})
			},
			
			onCallBack() {
				this.$refs.isBuyHintPopup.close()
				setTimeout(() => uni.navigateBack(), 300)
			},

			verifyData(data) { // 验证表单字段是否完整
				console.log(data)
				let status = true
				for (let key in data) {
					let item = data[key]
					if (item === '' || item === null) {
						toast('请填写完整')
						status = false
					} else {
						if (key == 'phone') {
							const myreg = /^[1][3,4,5,7,8][0-9]{9}$/;
							if (item.length < 11) {
								toast("手机号码最短需要 11 个位")
								status = false
							} else {
								if (!myreg.test(item)) {
									app.toast("手机号格式有误")
									status = false
								}
							}
						}
					}
				}
				return status
			},

			watchUserAccredit() {
				if (this.userAccredit) {
					setTimeout(() => this.$refs.showPicker.show(), 300);
				} else {
					this.getUserData()
				}
			},
			// 微信用户授权方法回调
			GetUserSuccess(e) {
				this.$refs.showPicker.close();
				this.getUserData()
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #fff;
	}

	.list {
		padding: 0 40rpx;

		.item {
			height: 104rpx;
			display: flex;
			align-items: center;

			text {
				font-size: 32rpx;
				color: #333333;
			}

			input {
				flex: 1;
				font-size: 32rpx;
			}
		}
	}

	.protocol {
		position: absolute;
		bottom: 218rpx;
		left: 0;
		right: 0;
		width: 100%;
		margin: auto;
		z-index: 1;
	}
</style>
